<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="1000px"
    @open="handleDialogOpen()" v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form :model="TeamlsModel"
      ref="libForm" label-width="80px" label-position="right" size="small" :inline="true" :rules="teamls">
      <el-form-item label="食品名称" prop="name">
        <el-col :span="16"><el-input  :maxlength="32" v-model="TeamlsModel.name"></el-input></el-col>
      </el-form-item>
      <el-form-item label="所属类别" prop="typeId">
        <el-col :span="16">
          <el-select v-model="TeamlsModel.typeId">
               <el-option
                    v-for="item in TmealsTypeList"
                    :key="item.typeId"
                    :label="item.name"
                    :value="item.id">
                </el-option>
          </el-select>
          </el-col>
      </el-form-item>
      <el-form-item label="100g含能量" prop="energy">
        <el-col :span="16"><el-input  :maxlength="32" v-model="TeamlsModel.energy"></el-input></el-col>
      </el-form-item>
      <el-form-item label="每kcal能量" prop="kcal">
        <el-col :span="16"><el-input  :maxlength="32" v-model="TeamlsModel.kcal"></el-input></el-col>
      </el-form-item>
      <el-form-item label="每kj能量" prop="kj">
        <el-col :span="16"><el-input  :maxlength="32" v-model="TeamlsModel.kj"></el-input></el-col>
      </el-form-item>
      <el-form-item label="碳水化合物含量" prop="carbohydrate">
        <el-col :span="16">
         <el-input :span="16" v-model="TeamlsModel.carbohydrate"></el-input>
          </el-col>
      </el-form-item>
      <el-form-item label="脂肪含量" prop="fat">
        <el-col :span="16">
         <el-input :span="16" v-model="TeamlsModel.fat"></el-input>
          </el-col>
      </el-form-item>
      <el-form-item label="蛋白质含量" prop="protein">
        <el-col :span="16">
         <el-input :span="16" v-model="TeamlsModel.protein"></el-input>
          </el-col>
      </el-form-item>
      <el-form-item label="高血压" prop="hbp">
        <el-col :span="16">
           <el-select v-model="TeamlsModel.hbp">
              <el-option label="是" value="0"></el-option>
              <el-option label="不是" value="1"></el-option>
          </el-select>
          </el-col>
      </el-form-item>
      <el-form-item label="糖尿病" prop="diabetes">
        <el-col :span="16">
          <el-select v-model="TeamlsModel.diabetes">
              <el-option label="是" value="0"></el-option>
              <el-option label="不是" value="1"></el-option>
          </el-select>
          </el-col>
      </el-form-item>
      <el-form-item label="冠心病" prop="chd">
        <el-col :span="16">
          <el-select v-model="TeamlsModel.chd">
              <el-option label="是" value="0"></el-option>
              <el-option label="不是" value="1"></el-option>
          </el-select>
          </el-col>
      </el-form-item>
      <el-form-item label="脑卒中" prop="stroke">
        <el-col :span="16">
          <el-select v-model="TeamlsModel.stroke">
              <el-option label="是" value="0"></el-option>
              <el-option label="不是" value="1"></el-option>
          </el-select>
          </el-col>
      </el-form-item>
      <el-form-item label="心脑血管疾病" prop="cacd">
        <el-col :span="16">
          <el-select v-model="TeamlsModel.cacd">
              <el-option label="是" value="0"></el-option>
              <el-option label="不是" value="1"></el-option>
          </el-select>
          </el-col>
      </el-form-item>
      <el-form-item label="高血脂" prop="hyperlipidemia">
        <el-col :span="16">
          <el-select v-model="TeamlsModel.hyperlipidemia">
              <el-option label="是" value="0"></el-option>
              <el-option label="不是" value="1"></el-option>
          </el-select>
          </el-col>
      </el-form-item>
       <el-form-item label="肥胖" prop="obesity">
        <el-col :span="16">
          <el-select v-model="TeamlsModel.obesity">
             <el-option label="是" value="0"></el-option>
              <el-option label="不是" value="1"></el-option>
          </el-select>
          </el-col>
      </el-form-item>
       <el-form-item label="通风" prop="ventilate">
        <el-col :span="16">
          <el-select v-model="TeamlsModel.ventilate">
             <el-option  label="是" value="0"></el-option>
              <el-option label="不是" value="1"></el-option>
          </el-select>
          </el-col>
      </el-form-item>
      <el-form-item label="说明" prop="explain">
         <el-input type="textarea" v-model="TeamlsModel.explain" style="width:700px"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('libForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { TmealsAdd, Tmealsupd } from '@/api/shanshiku_tj'
export default {
  name: 'ssk-edit',
  props:['TmealsTypeList'],
  data() {
    return {
      loading: false,
      TeamlsModel: {

      },
      dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
      teamls:{
         name: [
            { required: true, message: '请输入食品名称', trigger: 'blur' },
          ],
           typeId: [
            { required: true, message: '请选择所属类别', trigger: 'blur' },
          ],
           kcal: [
            { required: true, message: '请输入每Kcal能量', trigger: 'blur' },
          ],
           kj: [
            { required: true, message: '请输入每KJ能量', trigger: 'blur' },
          ],
           carbohydrate: [
            { required: true, message: '请输入化合物含量', trigger: 'blur' },
          ],
           fat: [
            { required: true, message: '请输入脂肪含量', trigger: 'blur' },
          ],
           protein: [
            { required: true, message: '请输入蛋白质含量', trigger: 'blur' },
          ],
          hbp:[
           { required: true, message: '请选择高血压', trigger: 'blur' },
      ],
      diabetes:[
           { required: true, message: '请选择糖尿病', trigger: 'blur' },
      ],
      chd:[
           { required: true, message: '请选择冠心病', trigger: 'blur' },
      ],
      stroke:[
           { required: true, message: '请选择脑卒中', trigger: 'blur' },
      ],
       cacd:[
           { required: true, message: '请选择心脑血管疾病', trigger: 'blur' },
      ],
       hyperlipidemia:[
           { required: true, message: '请选择高血脂', trigger: 'blur' },
      ],
       obesity:[
           { required: true, message: '请选择肥胖', trigger: 'blur' },
      ],
      ventilate:[
           { required: true, message: '请选择通风', trigger: 'blur' },
      ],
      explains:[
           { required: true, message: '请输入说明', trigger: 'blur' },
      ],
        }
      }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.dialogProps.action === 'add') {
            this.doSaveTmeals()
          } else {
            this.doUpdatessk()
          }
        } else {
          return false
        }
      });
    },
    doUpdatessk() {
      this.loading = true
      Tmealsupd(this.TeamlsModel)
      .then(response => {
        this.loading = false
        this.dialogProps.visible = false
        this.$emit('save-finished')
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    doSaveTmeals() {
      this.loading = true
      TmealsAdd(this.TeamlsModel)
      .then(response => {
        this.loading = false
        this.dialogProps.visible = false
        this.$emit('save-finished')
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    handleDialogClose() {
      this.dialogProps.visible = false
    },
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs['libForm'].clearValidate()
      })
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })
    }
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openEditDialog', function(TMeals) {
        this.TeamlsModel=TMeals
        console.log(this.TeamlsModel)
        this.dialogProps.action = 'edit'
        this.dialogProps.title = '修改'
        this.dialogProps.visible = true
      })
      this.$on('openAddDialog', function() {
        this.dialogProps.action = 'add'
        this.dialogProps.title = '添加'
        this.dialogProps.visible = true
      })
    })
  }
}
</script>

